<template>
  <div class="menu_box">
    <div class="tip">
      <h3>歌单推荐</h3>
      <i class="el-icon-arrow-right"></i>
    </div>

    <div class="musiclist">
      <div class="ul clear">
        <div>
          <div class="img_box">
            <img
                  src="http://p1.music.126.net/iHbKrvHFfHb1y3Osu9EnPQ==/109951166726930602.jpg?param=140y140"
                  alt=""
                />
          </div>
          <div class="img_box" v-for="(val, index) in musicList" :key="index">
             <img :src="val.picUrl" alt="" @click="musicdetails(val.id)" />
                <div class="i1">
                  <i class="el-icon-caret-right"></i>
                </div>
                <div class="playCount">
                  <i class="el-icon-video-play"></i>
                  <span>{{ Math.floor(val.playCount / 10000) }} 万</span>
                </div>
                 <div class="p">
                {{ val.name }}
              </div>
          </div>

         
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      musicList: []
    }
  },
  mounted () {
    const musicList = sessionStorage.getItem('menulist')
    if (musicList == undefined) {
      this.request.get('/personalized', { limit: 9 }).then((res) => {
        console.log(res.result)
        this.musicList = res.result
        sessionStorage.setItem('menulist', JSON.stringify(res.result))
      })
    } else {
      this.musicList = JSON.parse(musicList)
    }
    console.log(this.musicList)
  },
  methods: {
    musicdetails (e) {
      this.$router.push({
        path: '/musicdetails',
        query: {
          id: e
        }
      })
    }
  }
}
</script>

<style scoped>
.menu_box {
  width: 100%;
  height: 550px;
  margin-left: 8px;
}
.tip {
  width: 98%;
  line-height: 50px;
  background-color: white;
  margin: 0 auto;
}
.tip h3 {
  display: inline-block;
  font-size: 1.45rem;
}
.tip i {
  line-height: 50px;
  font-size: 1.45rem;
  color: #333333;
}
.musiclist {
  width: 98%;
  height: 50%;
  background-color: white;
  margin: 0 auto;
}
.ul>div {
  width: 100%;
  height: 550px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.ul .img_box{
  width: 200px;
  height: 200px;
}
.img_box .p {
  width: 200px;
  height: 40px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 0.8rem;
  color: #373737;
  box-sizing: border-box;
  padding-top: 8px;
  margin-bottom: 20px;
}
 .img_box {
  width: 100%;
  height: 200px;
  background-color: rgb(255, 255, 255);
  position: relative;
}
.img_box img {
  width: 100%;
  height: 200px;
  border-radius: 7px;
}
.img_box .i1 {
  width: 35px;
  height: 35px;
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 2.5rem;
  background-color: #ebeaea;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 1s;
}
.img_box .i1 i {
  line-height: 35px;
  font-size: 1.75rem;
  color: #ec4141;
}
.img_box:hover .i1 {
  opacity: 1;
}
.playCount {
  width: auto;
  height: 30px;
  position: absolute;
  z-index: 99;
  top: 0;
  right: 0;
  color: white;
  margin-right: 5px;
}
.playCount i {
  line-height: 30px;
  float: left;
  font-size: 1.25rem;
  margin-right: 5px;
}
.playCount span {
  line-height: 30px;
  float: left;
  font-size: 0.8rem;
} 
</style>
